<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Appearance</title>
<style type="text/css">
.none > input {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
.checkbox > input {
    -webkit-appearance: checkbox;
       -moz-appearance: checkbox;
            appearance: checkbox;
}
.radio > input {
    -webkit-appearance: radio;
       -moz-appearance: radio;
            appearance: radio;
}
.searchfield-cancel-button > input {
    -webkit-appearance: searchfield-cancel-button;
       -moz-appearance: searchfield-cancel-button;
            appearance: searchfield-cancel-button;
}
.sliderthumb-horizontal > input {
    -webkit-appearance: sliderthumb-horizontal;
       -moz-appearance: sliderthumb-horizontal;
            appearance: sliderthumb-horizontal;
}
.sliderthumb-vertical > input {
    -webkit-appearance: sliderthumb-vertical;
       -moz-appearance: sliderthumb-vertical;
            appearance: sliderthumb-vertical;
}
</style>
</head>
<body>
<div class="normal">
    <label>normal</label>
    <input type="text">
</div>
<div class="none">
    <label>appearance: none;</label>
    <input type="text">
</div>
<div class="checkbox">
    <label>appearance: checkbox;</label>
    <input type="text">
</div>
<div class="radio">
    <label>appearance: radio;</label>
    <input type="text">
</div>
<div class="searchfield-cancel-button">
    <label>appearance: searchfield-cancel-button;</label>
    <input type="text">
</div>
<div class="sliderthumb-horizontal">
    <label>appearance: sliderthumb-horizontal;</label>
    <input type="text">
</div>
<div class="sliderthumb-vertical">
    <label>appearance: sliderthumb-vertical;</label>
    <input type="text">
</div>
</body>
</html>
